<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>纯CSS3实现流星划过动画</title>
</head>
<link rel="stylesheet" href="../common.css">
<style>
  .box {
    width: 152px;
    height: 109px;
    position: relative;
    /* border: 1px solid red; */
  }

  .line {
    position: absolute;
    background: url(./img/lxy.png) no-repeat;
    background-size: 100% 100%;
    transform: scale(0) translate3d(30px, -30px, 0);
  }

  .line:nth-child(1) {
    animation: shank 1.6s ease-in infinite;
    left: 0;
    bottom: 58px;
    width: 25px;
    height: 27px;
  }

  .line:nth-child(2) {
    left: 30px;
    top: -5px;
    width: 19px;
    height: 20px;
    animation: shank 1.6s 0.3s ease-in infinite;
  }

  .line:nth-child(3) {
    left: 63px;
    top: -19px;
    width: 39px;
    height: 41px;
    animation: shank 1.6s 0.6s ease-in infinite;
  }

  .line:nth-child(4) {
    right: 20px;
    top: 4px;
    width: 20px;
    height: 20px;
    animation: shank 1.6s 0.3s ease-in infinite;
  }

  .line:nth-child(5) {
    right: 0;
    bottom: 43px;
    width: 36px;
    height: 39px;
    animation: shank 1.6s 0.1s ease-in infinite;
  }

  @keyframes shank {
    0% {
      opacity: 0;
      transform: scale(0.9) translate3d(30px, -30px, 0);
    }

    80% {
      opacity: 1;
      transform: scale(1) translate3d(-30px, 30px, 0);
    }

    100% {
      opacity: 0;
      transform: scale(1.1) translate3d(-50px, 50px, 0);
    }
  }
</style>

<body>
  <div class="box">
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
  </div>
</body>

</html>